<template>
  <el-container>
    <el-header style="border-bottom: 1px solid rgba(255,255,255,0.12)">
      <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #7DDAFF;">追踪车辆信息</p>
    </el-header>
    <el-main>

      <el-row class="btn-group">
        <el-button class="btn" @click="handleAdd"><span>增加</span><i class="el-icon-plus"></i>
        </el-button>
        <el-button class="btn" @click="handleDownloadIllPark">
          <span>导入</span><i class="el-icon-upload"></i>
        </el-button>
        <!--  <el-button class="btn" @click="handleDownloadIllPark">
           <span>导出</span><i class="el-icon-download"></i>
         </el-button>-->
      </el-row>

      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                element-loading-background="rgba(0, 0, 0, .3)"
                height="500"
                :row-class-name="tableRowClassName"
                style="width: 100%;padding-top: 0px;background-color: #1B4685"
                ref="traceCarTable">
        <el-table-column align="center" label="追踪类型" sortable prop="type">
          <template slot-scope="scope">
            <span>{{scope.row.type|formatTypes}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="车牌号" sortable prop="plateNo">
          <template slot-scope="scope">
            <span>{{scope.row.plateNo}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最近一次发现地点" sortable prop="lastFindParkName">
          <template slot-scope="scope">
            <span>{{scope.row.lastFindParkName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最近一次发现时间" sortable prop="lastFindTime">
          <template slot-scope="scope">
            <span>{{scope.row.lastFindTime}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="追踪单位" sortable prop="orgName">
          <template slot-scope="scope">
            <span>{{scope.row.orgName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" sortable prop="time ">
          <template slot-scope="scope">
            <span>{{scope.row.time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="备注" sortable prop="remark">
          <template slot-scope="scope">
            <span>{{scope.row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
          <span class="btn-group">
                <el-button class="btn" style=" margin-bottom: 0px" @click="handleView(scope.row)">
                  <span>查看</span><i class="el-icon-view"></i>
                </el-button>
            <!--      <el-button class="btn" style=" margin-bottom: 0px" @click="handleEdit(scope.row)">
                    <span>编辑</span><i class="el-icon-edit"></i>
                  </el-button>
                  <el-button class="btn" style=" margin-bottom: 0px" @click="handleDel(scope.row)">
                    <span>删除</span><i class="el-icon-delete"></i>
                  </el-button>-->
          </span>
          </template>
        </el-table-column>
      </el-table>

    </el-main>
    <el-footer>
      <el-pagination style="margin-top: 16px" background
                     @size-change="handleSizeQueryTrace"
                     @current-change="handleCurrentChangeTrace"
                     :current-page="listQuery.num"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="listQuery.pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
   <el-dialog title="添加" :visible.sync="addViewVisible" center width="720px">
      <el-form :model="traceCarModel" :label-position="'left'" label-width="90px"
               style=" margin-left:50px;">
        <el-form-item prop="plateColor" label="追踪类型">
          <el-radio-group v-model="traceCarModel.type" size="small">
            <el-radio v-for="item in trackCategorys" :label="item.id" style="color: white">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="车牌号" prop="plateNo">
          <el-input clearable v-model="traceCarModel.plateNo" style="color: white"></el-input>
        </el-form-item>
        <el-form-item label="车牌颜色" prop="plateColor">
          <el-radio-group v-model="traceCarModel.plateColor" size="small">
            <el-radio v-for="item in plateColors" :label="item.id" style="color: white">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="追踪单位" prop="orgName">
          <el-input clearable v-model="traceCarModel.orgName" style="color: white"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input clearable type="textarea" v-model="traceCarModel.remark" style="color: white" :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addViewVisible = false" class="btn-search">取消</el-button>
        <el-button type="primary" class="btn-search" @click="add">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改" :visible.sync="editViewVisible" center>
      <el-form :model="traceCarModel" :label-position="'left'" label-width="90px"
               style="width: 400px; margin-left:50px;">
        <el-form-item prop="type" label="追踪类型">
          <el-radio-group v-model="traceCarModel.type" size="small">
            <el-radio v-for="item in trackCategorys" :label="item.id">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="车牌号" prop="plateNo">
          <el-input clearable v-model="traceCarModel.plateNo"></el-input>
        </el-form-item>
        <el-form-item label="车牌颜色" prop="plateColor">
          <el-radio-group v-model="traceCarModel.plateColor" size="small">
            <el-radio v-for="item in plateColors" :label="item.id">{{item.value}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="追踪单位" prop="account_carno">
          <el-input clearable readonly v-model="traceCarModel.orgName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="auditopinion">
          <el-input clearable type="textarea" v-model="traceCarModel.remark" :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editViewVisible = false" class="btn-search">取消</el-button>
        <el-button type="primary" class="btn-search" @click="add">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看追踪记录" :visible.sync="viewVisible" center width="720px">
      <el-table :data="carTraceMessages"  height="400"
                :row-class-name="tableRowClassName"
                style="width: 100%;padding-top: 0px;background-color: #1B4685">
        <el-table-column label="停车场" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.orgName}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间" sortable align="center">
          <template slot-scope="scope">
            <span>{{scope.row.time}}</span>

          </template>
        </el-table-column>
        <el-table-column label="事件" align="center">
          <template slot-scope="scope">
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="background-color: #284297">
        <el-button @click="viewVisible = false" class="btn-search">取消</el-button>
        <el-button type="primary" class="btn-search" @click="add">确定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
  import { addTraceCar, queryCarTraceMessageByCarAndType } from '../../../api/comprehensive/track';
  import { parseTime } from '../../../filters/index';

  export default {
    name: 'track-car-table',
    props: ['searchList', 'listLoadingIllPark'],
    watch: {
      searchList(val) {
        this.dataList = val.list;
        this.total = val.count;
      },
      listLoadingIllPark(val) {
        this.listLoading = val;
      }
    },
    filters: {
      formatTypes(type) {
        const types = [
          {id: 1, value: '嫌疑车'},
          {id: 2, value: '脱审车'},
          {id: 3, value: '套牌车'},
          {id: 4, value: '欠费车'}
        ];
        for (const compare of types) {
          if (compare.id === type) {
            return compare.value;
          }
        }
      }
    },
    data() {
      return {
        listLoading: false,
        addViewVisible: false,
        editViewVisible: false,
        viewVisible: false,
        delViewVisible: false,
        dialogReviewVisible: false,
        dataList: [],
        carTraceMessages: [],
        total: 0,
        listQuery: {
          pageSize: 20,
          num: 1,
          condition: {}
        },
        listQueryDetail: {
          pageSize: 100,
          num: 1,
          condition: {}
        },
        trackCategorys: [
          {id: 1, value: '嫌疑车'},
          {id: 2, value: '脱审车'},
          {id: 3, value: '套牌车'},
          {id: 4, value: '欠费车'}
        ],
        plateColors: [
          {id: 0, value: '白'},
          {id: 1, value: '黄'},
          {id: 2, value: '蓝'},
          {id: 3, value: '黑'},
          {id: 4, value: '绿'},
          {id: 9, value: '其他颜色'}
        ],
        tempParkInfo: {},
        traceCarModel: {
          //   lastFindParkName: '',
          //   lastFindParkNo: '',
          //      lastFindTime: '',
          orgName: '',
          orgNo: '123',
          plateColor: 2,
          plateNo: '',
          remark: '',
          time: '',
          type: 1
        },
        carTraceParam: {
          plateColor: null,
          plateNo: null,
          traceType: null
        }

      };
    },
    methods: {
      handleDownloadIllPark() {
        this.$emit('openUpload', true);
      },
      handleSizeQueryTrace(val) {
        this.listQuery.num = 1;
        this.listQuery.pageSize = val;
        this.$emit('handleSizeQueryTrace', val);
      },
      handleCurrentChangeTrace(val) {
        this.listQuery.num = val;
        this.$emit('handleCurrentChangeTrace', val);
      },
      handleAdd(val) {
        this.addViewVisible = true;
      },
      handleEdit(val) {
        this.editViewVisible = true;
      },
      handleDel(val) {
        this.delViewVisible = true;
      },
      handleView(val) {
        this.viewVisible = true;
        this.carTraceParam.plateNo = val.plateNo;
        this.carTraceParam.plateColor = val.plateColor;
        this.carTraceParam.traceType = val.type;
        this.queryCarTraceMessageByCarAndType();
      },
      queryCarTraceMessageByCarAndType() {
        this.listQueryDetail.condition = this.carTraceParam;
        queryCarTraceMessageByCarAndType(this.listQueryDetail).then(res => {
          this.carTraceMessages = res.list;
          this.loading = false;
        }, () => {
          this.loading = false;
        });
      },
      add() {
        this.traceCarModel.time = parseTime(new Date());
        addTraceCar(this.traceCarModel).then(res => {
          this.addViewVisible = false;
        }, () => {
          this.addViewVisible = false;
        });
      },
      close() {
        this.addViewVisible = false;
        this.editViewVisible = false;
        this.delViewVisible = false;
        this.viewVisible = false;
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        }
        return '';
      }
    }
  };
</script>

<style scoped>
  .btn-group > .el-button span {
    display: none;
  }

  .btn-group > .el-button:hover {
    background-color: #409EFF;
  }

  .btn-group > .el-button:hover span {
    display: block;
  }

  .btn-group > .el-button:hover i {
    display: none;
  }

</style>
